<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import {onMounted, reactive, ref} from "vue";
import {deleteApi, deleteBatchApi, pageApi} from "../../../util/axios.js";
import {myPage} from "../../../util/request.js";
import {notYet} from "../../../util/index.js";
import {MINIO_BANNER} from "../../../const/index.js";

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'Goods', label: '营销管理'},
  {icon: 'Picture', label: '横幅列表'},
];

// 表格列
const columns = [
  {label: '序号', prop: 'idx', type: 'tag', width: 70},
  {label: '横幅图片', prop: 'url', type: 'img', width: 100, minio: MINIO_BANNER},
  {label: '横幅描述', prop: 'info', type: 'card', width: 500, tooltip: false},
];

/* ==================== 分页查询 ==================== */

// 表格行 + 分页 + 横幅标题
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});

/**
 * 分页查询
 *
 * 1. 定义分页基础配置，包括 records, pageInfo, api, params 等。
 * 2. 附加分页查询条件，如标题等。
 * 3. 异步发送分页查询请求。
 *
 * @param pageNum 当前第几页，默认 1
 * @param pageSize 每页多少条，默认 5
 */
async function page(pageNum = pageInfo['pageNum'],
                    pageSize = pageInfo['pageSize']) {
  let config = {
    records, pageInfo,
    api: pageApi,
    params: {pageNum, pageSize, pid: 0},
    args: {module: 'banner'},
  }
  await myPage(config);
}

/* ==================== 加载函数 ==================== */

onMounted(() => page());

</script>

<template v-if="records">
  <my-nav :items="navItems"/>
  <el-divider/>
  <my-table module="banner"
            insert-page="/BannerInsert"
            update-page="/BannerUpdate"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :excel-api="notYet"
            :records="records"
            :columns="columns"/>
  <my-pager :page-info="pageInfo"/>
</template>

<style scoped lang="scss">

</style>